<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组件管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/load/jquery.mloading.css">
    <script type="text/javascript"
            src="../lib/vue/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/global.js"></script>
    <script type="text/javascript" src="../js/store.js"></script>
    <script type="text/javascript" src="../js/cookies.js"></script>
    <script src="../lib/vue/vue.min.js"></script>
    <script src="../lib/vue/axios.min.js"></script>
    <script src="../lib/load/jquery.mloading.js"></script>
    <style>
        body {
            background-color: #f2f3f0;
        }

        .layui-colla-title {
            color: #009688;
        !important;
            font-weight: bolder;
        }

        .component_title {
            font-size: 20px;
            text-align: center;
            margin: 15px 0;
        }

        .component_content {
            font-size: 14px;
            padding: 20px;
            line-height: 25px;
            /*text-indent: 2em;*/
        }

        .component_content_title {
            float: left;
            font-size: 16px;
            font-weight: bold;
        }

        .component_content_item {
            margin-left: 10px;
            font-size: 16px;
        }

        .addVersionNo {
            float: right;
        }
    </style>
</head>
<body>
<div id="component_detail">
    <div class="layui-tab layui-tab-brief">
        <div class="layui-tab-content">
            <div class="layui-row">
                <div>
                    <div>
                        <fieldset class="layui-elem-field">
                            <legend>选择版本</legend>
                            <div id="show-form" style="float: left;">
                                <div class="layui-field-box">
                                    <form class="layui-form">
                                        <div class="layui-input-inline" style="width: 150px;">
                                            <select id="L_versionNo" name="versionNo"
                                                    lay-verify="versionNo"
                                                    lay-filter="versionNo">
                                            </select>
                                        </div>
                                    </form>
                                </div>

                            </div>
                            <!-- <div v-if="userType < 3">
                                 <button class="layui-btn layui-btn-normal"
                                         lay-filter="copy" lay-submit=""
                                         style="width: 180px;margin-top: 10px;">
                                     复制(另存接口)
                                 </button>
                             </div>-->
                            <div class="addVersionNo"
                                 v-show="userType==2||(userType==1&&componentIds.indexOf(componentId)>-1)">
                                <button class="layui-btn layui-btn-warm" onclick="addEnv()">
                                    关联环境
                                </button>
                            </div>
                            <div class="addVersionNo"
                                 v-show="userType==4||(userType==3&&componentIds.indexOf(componentId)>-1)">
                                <button class="layui-btn layui-btn-danger" onclick="deleteVersion()">
                                    删除组件版本
                                </button>
                            </div>
                            <div class="addVersionNo"
                                 v-show="userType==4||(userType==3&&componentIds.indexOf(componentId)>-1)">
                                <button class="layui-btn"
                                        onclick="x_admin_show('添加组件','./componentInfo-add.html',700,500)">
                                    <i class="layui-icon"></i>添加组件版本
                                </button>
                            </div>
                        </fieldset>
                    </div>
                    <div class="component_content">
                        <blockquote class="layui-elem-quote">
                            <h1 class="component_title">{{componentName}}
                            </h1>
                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">基本信息</h2>
                                    <div class="layui-colla-content layui-show">
                                        <a class="component_content_title">组件名称：</a>
                                        <a class="component_content_item">{{componentName}}</a>
                                        <br>
                                        <a class="component_content_title">组件描述：</a>
                                        <a class="component_content_item">{{componentDesc}}</a>
                                        <br>
                                        <a class="component_content_title">版&nbsp;本&nbsp;号：</a>
                                        <a class="component_content_item">V{{componentInfo.versionNo}}</a>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">接入方式</h2>
                                    <div class="layui-colla-content layui-show">
                                        <a class="component_content_item">{{componentInfo.accessInfo}}</a>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">最佳实践</h2>
                                    <div class="layui-colla-content layui-show">
                                        <a class="component_content_item">{{componentInfo.bestPractice}}</a>
                                    </div>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <input hidden type="text" id="componentInfoId">
</div>
<script>
    let editData = parent.$("#editComponent").val();
    let editArray = JSON.parse(editData);
    let componentId = editArray.id;
    let componentName = editArray.componentName
    let componentDesc = editArray.componentDesc
    let componentInfoId = '';
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery
        let form = layui.form
            , layer = layui.layer
        //获取选中的数据 进行格式转换，并加载到form表单中
        //获取组件版本下拉表
        $.get(_hostUrl + '/cmsComponentInfos/' + parseInt(componentId), function (res) {
            if (res.responseCode != 200) {
                layer.msg(res.responseMsg, {icon: 2, time: 1500});
                return;
            } else {
                let componentArray = res.data;
                for (var i = 0; i < componentArray.length; i++) {
                    $('#L_versionNo').append(new Option(componentArray[i].versionNo, componentArray[i].id))// 下拉菜单里添加元素
                }
                $('#L_versionNo').val(parseInt(getUrlKey('id')));
                form.render();
            }
        })
        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 1) {
                    return '用户名不可为空'
                }
            },
            tel: function (value) {
                if (value.length < 1) {
                    return '联系方式不可为空'
                }
            }
        });
        //监控版本下拉框选择事件
        form.on('select()', function (data) {
            componentInfoId = data.value;
            $.get(_hostUrl + '/cmsComponentInfo/' + parseInt(componentInfoId), function (res) {
                if (res.responseCode != 200) {
                    layer.msg(res.responseMsg, {icon: 2, time: 1500});
                    return;
                } else {
                    vm.componentInfo = res.data;
                }
            })
        });
    });

    function deleteVersion() {
        if (componentInfoId == null || componentInfoId === "") {
            layer.msg("请先选择版本！", {icon: 2, time: 1500});
        } else {
            layer.confirm("确定删除该组件版本吗?", function (index) {
                $.deleteJSON(_hostUrl + "/cmsComponentInfo/" + componentInfoId
                    , null, function (res) {
                        if (res.responseCode == 204) {
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //刷新父页面后关闭窗口
                                window.location.reload();
                            });
                        } else {
                            layer.msg(res.responseMsg, {icon: 2, time: 1500})
                        }
                    })
            })
        }
    }

    function addEnv() {
        if (componentInfoId == null || componentInfoId === "") {
            layer.msg("请先选择版本！", {icon: 2, time: 1500});
        } else {
            $('#componentInfoId').val(componentInfoId)
            x_admin_show('关联环境', './componentInfo-env-add.html', 700, 500)
        }
    }
</script>
<script>
    let vm = new Vue({
        el: '#component_detail',
        data() {
            return {
                componentInfo: {},
                componentName: componentName,
                componentDesc: componentDesc,
                componentIds: '',
                componentId: componentId,
                userType: 0
            }
        }, beforeMount() {
            this.userType = getCookie('userType');
            this.componentIds = getCookie('componentIds')
        }
    })
</script>
</body>
</html>